<template>
  <div v-if="returnDetail.id" class="return-detail">
    <el-card shadow="never" class="margin-30">
      <div>
        <h4>
          退单信息:
          <el-tag v-if="returnDetail.status === 3" type="danger" size="mini" effect="dark">已拒绝</el-tag>
          <el-tag v-if="returnDetail.status === 2" type="success" size="mini" effect="dark">已完成</el-tag>
          <el-tag v-if="returnDetail.status === 1" type="info" size="mini" effect="dark">退货中</el-tag>
          <el-tag v-if="returnDetail.status === 0" type="warning" size="mini" effect="dark">待处理</el-tag>
        </h4>

        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <span>订单编号:</span>
            <span style="color:red">{{ returnDetail.orderSn }}</span>
            <el-button type="text" size="mini" @click="goOrderDetail">查看订单详情</el-button>

          </el-col>
          <el-col :span="6" :offset="0">
            <span>退单人姓名:</span>
            <span>{{ returnDetail.returnName }}</span>
          </el-col>
          <el-col :span="6" :offset="0">
            <span>退单理由:</span>
            <span>{{ returnDetail.reason }}</span>
          </el-col>
          <el-col :span="6" :offset="0">
            <span>退单描述:</span>
            <span>{{ returnDetail.description }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <span>申请时间:</span>
            <span>{{ returnDetail.createTime }}</span>
          </el-col>
        </el-row>

      </div>
      <el-divider />

      <div>
        <h4>退货商品:</h4>
        <el-table :data="[returnDetail]" border stripe>
          <el-table-column
            label="商品图片"
            align="center"
          >
            <template slot-scope="scope">
              <img width="100" height="100" :src="scope.row.productPic" alt="">
            </template>
          </el-table-column>
          <el-table-column
            label="商品描述"
            align="center"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.productName }}</div>
              <div>品牌：{{ scope.row.productBrand }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="productPrice"
            label="价格"
            align="center"
          />
          <el-table-column
            label="商品属性"
            align="center"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.productAttr | formartAttr }}</div>

            </template>
          </el-table-column>
          <el-table-column
            prop="productCount"
            label="商品数量"
            align="center"
          />
          <el-table-column
            prop="returnAmount"
            label="总计"
            align="center"
          />
        </el-table>

      </div>
      <el-divider />
      <div>
        <h4>
          用户信息：
        </h4>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <span>联系人:</span>
            <span style="color:red">{{ returnDetail.memberUsername }}</span>
          </el-col>

          <el-col :span="6" :offset="0">
            <span>联系电话:</span>
            <span>{{ returnDetail.returnPhone }}</span>
          </el-col>
        </el-row>
      </div>
      <el-divider />
      <div>
        <h4>
          费用信息：
        </h4>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <span>退单金额:</span>
            <span style="color:red">{{ returnDetail.returnAmount }}</span>
          </el-col>
          <el-col :span="6" :offset="0">
            <span>运费金额:</span>
            <span>0</span>
          </el-col>
        </el-row>
        <el-form v-if="returnDetail.status === 0" ref="form" :model="form" :rules="rules" label-width="80px" size="mini">
          <el-row :gutter="20">
            <el-col :span="6" :offset="0">
              <el-form-item label="退款金额" prop="returnAmount">
                <el-input v-model="form.returnAmount" size="mini" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="处理人" prop="handleMan">
                <el-input v-model="form.handleMan" />
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="处理备注" prop="handleNote">
                <el-input v-model="form.handleNote" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item>
            <el-button type="primary" @click="agreeReturn">同意退款</el-button>
            <el-button type="default" @click="refuseReturn">拒绝退款</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="returnDetail.status === 1">
        <h4>
          处理结果：
        </h4>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <span>处理人:</span>
            <span style="color:red">{{ returnDetail.handleMan }}</span>
          </el-col>
          <el-col :span="6" :offset="0">
            <span>处理备注:</span>
            <span>{{ returnDetail.handleNote }}</span>
          </el-col>
          <el-col :span="6" :offset="0">
            <span>处理时间:</span>
            <span>{{ returnDetail.handleTime }}</span>
          </el-col>
        </el-row>
        <el-form v-if="returnDetail.status === 1" ref="receiveForm" :model="receiveForm" :rules="receiveRules" label-width="80px" size="mini">
          <el-row :gutter="20">

            <el-col :span="6" :offset="0">
              <el-form-item label="收货人" prop="receiveMan">
                <el-input v-model="receiveForm.receiveMan" />
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="收货备注" prop="receiveNote">
                <el-input v-model="receiveForm.receiveNote" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item>
            <el-button type="primary" @click="doReceive">同意退款</el-button>

          </el-form-item>
        </el-form>
      </div>

    </el-card>
  </div>
</template>
<script>
import {
  orderReturn as orderReturnApi,
  agreeApply as agreeApplyApi,
  receiveProduct as receiveProductApi
} from '@/api/order/return'

export default {
  name: 'ReturnDetail',
  filters: {
    formartAttr(params) {
      console.log('params==>', params)
      let str = ''
      try {
        const arr = JSON.parse(params)
        arr.forEach(item => {
          str += item.key + ':' + item.value
        })
      } catch (error) {
        console.log('error=>', error)
      }
      return str
    }
  },
  mixins: [],
  data() {
    return {
      returnId: '',
      returnDetail: {},
      receiveForm: {},
      rules: {
        returnAmount: [{ required: true, message: '退款金额必填', trigger: 'blur' }],
        handleMan: [{ required: true, message: '处理人必填', trigger: 'blur' }],
        handleNote: [{ required: true, message: '处理备注必填', trigger: 'blur' }]

      },
      receiveRules: {
        receiveMan: [{ required: true, message: '收货人必填', trigger: 'blur' }],
        receiveNote: [{ required: true, message: '收货备注必填', trigger: 'blur' }]
      },
      form: {}
    }
  },
  watch: {
  },
  created() {
    this.returnId = this.$route.params.id
    if (this.returnId) {
      this.getReturnDetail()
    }
  },
  mounted() {
  },
  methods: {
    async getReturnDetail() {
      const res = await orderReturnApi(this.returnId)
      this.returnDetail = res.data.orderReturnApply
    },
    // 同意退款
    agreeReturn() {
      this.$refs.form.validate(async(valid) => {
        if (valid) {
          this.form.id = this.returnId
          const res = await agreeApplyApi(this.returnId, this.form)
          const { success, message } = res
          if (success) {
            // 刷新页面
            this.getReturnDetail()
          } else {
            this.$message.error(message)
          }
        } else {
          this.$message.warning('请注意表单校验')
        }
      })
    },
    refuseReturn() {

    },
    doReceive() {
      this.$refs.receiveForm.validate(async(valid) => {
        if (valid) {
          this.receiveForm.id = this.returnId
          const res = await receiveProductApi(this.returnId, this.receiveForm)
          const { success, message } = res
          if (success) {
            // 刷新页面
            this.getReturnDetail()
          } else {
            this.$message.error(message)
          }
        } else {
          this.$message.warning('请注意表单校验')
        }
      })
    },
    goOrderDetail() {
      this.$router.push({ name: 'OrderDetail', params: { id: this.returnDetail.orderId }})
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
